<template>
  <div class="content">
    <div class="login">
      <div class="logo tc">
        <img src="~assets/img/logo.png" alt="">
        <h2>艾鑫电子商务</h2>
      </div>
      <div v-focus>
      <ul class="flex-box" >
        <li><span>手机号：</span></li>
        <li><input  type="text" maxlength="11" v-model="mobile" placeholder="请输入手机号"></li>
        <li><img class="more-icon" v-if="isShow" @click="empty()" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
      <ul class="flex-box"  style="padding-right:4px">
        <li><span>图片验证：</span></li>
        <li><input  type="text" maxlength="6" v-model="img_code" placeholder="输入图片验证码"></li>
        <li><img @click="change_img()" v-if="imgShow" style="height:40px;width:80px;margin-top:6px;float:right"  :src="img" alt=""></li>
      </ul>
      <ul class="flex-box">
        <li><span>短信验证：</span></li>
        <li><input type="text" maxlength="6" v-model="code" placeholder="请输入短信验证码"></li>
        <li><span style="float:right" class="common-code" ref='get_code' @click="getCode()">{{getCodes}}</span></li>
      </ul>
      </div>
      <div class="agrees"> <div ref="agree" class="agree-top"><input id="agree" style="width:20px;height:20px" type="checkbox" name="agress" value="同意服务协议"/></div> <div @click="agresss()" class="agree-bottom">同意<span>服务协议</span></div> </div>
      <div style="margin-top:-14px;" class="tc"><button ref="btn" @click="logins()" class="common-btn">登录</button></div>
    </div>
    <mt-popup 
  v-model="popupVisible"
  position="right">
  <v-agree @popup-visible = 'getChildData()'  ref="agress"></v-agree>
</mt-popup>
  </div>
</template>

<script>
import { MessageBox, Toast  } from 'mint-ui'
import Agrees from './user_agree.vue'
import { apiPost } from 'src/common/api.js'
import { Base64 } from 'js-base64'
import axios from 'axios'
export default {
  components: {
    'v-agree': Agrees
  },
  data () {
    return {
      isShow: false,
      mobile: '',
      getCodes: '获取验证码',
      isSend: true,
      code: '',
      timer: '',
      img: '',
      img_code: '',
      isLogin: false,
      popupVisible: false,
      ref_code: '',
      isNew: false,
      myreg: /^((1[3,5,8,7][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/,
      imgShow: false
    }
  },
  mounted () {
    if (this.$route.query.ref_code) {
      this.ref_code = this.$route.query.ref_code
    }
    apiPost('userstatus',{}).then((data) => {
      if (data.status === 0) {
        this.$router.push('/user')
      }
    })
  },
  methods: {
    getChildData (data) {
       this.popupVisible = false
    },
    agresss () {
      this.popupVisible = true
    },
    // 登录
    logins () {
      var agree = document.getElementById('agree')
      if (this.isLogin === true) {
        if (this.myreg.test(this.mobile) === true) {
          if (this.isSend === false) {
            if (agree.checked) {
            axios.post('http://shop.aixinjituan.com/Api/shop/login',
              {'mobile': this.mobile, 'send_code': this.code, 'ref_code': this.ref_code}).then((data) => {
              if (data.data.status === 0) {  
               if (data.data.data.recode === 1001) {
                this.$router.push('/login_info')
              } else if (data.data.data.recode === 1002) {
                this.$router.push('/payment')
              } else if (data.data.data.recode === 1003) {
                this.$router.push('/payment_succ')
              } else if (data.data.data.recode === 1004) {
                this.$router.push('/payment_succ')
              } else if (data.data.data.recode === 1005) {
                this.$router.push('/user')
              } else if (data.data.data.recode === 1006) {
                this.$router.push('/payment_succ')
              }
              var uid = data.data.data.uid + ''
              this.$cookie.set('uid', uid, 3)
              this.$cookie.set('token', data.data.data.token, 3)
              } else if (data.data.status === 30004) {
                MessageBox({ title: '提示',message: '短信验证码错误'})
              } else {
                MessageBox({title: '提示',message: '服务器繁忙，请重试。。'})
              }
            })
          } else { Toast({ message: '请勾选同意服务协议',position: 'bottom', duration: 2000}) }
          } else {
            MessageBox({title: '提示',message: '验证码输入错误'})
          }
        } else {
          MessageBox({
            title: '提示',
            message: '手机号格式不正确'
          })
        }
      }
    },
    // 清空手机号输入框
    empty () {
      this.mobile = ''
    },
    change_img () {
      axios.post('http://shop.aixinjituan.com/Api/shop/imgcode',
          {'mobile': this.mobile}).then((data) => {
            if (data.data.status === 0) {
              this.img = Base64.decode(data.data.data.imgcode_base64)
              this.img_code = ''
            } else {
              console.log(data.data.msg)
            }
      })
    },
    // 获取手机短信验证码
    getCode () {
      if (this.myreg.test(this.mobile) === true) {
        if (this.img_code.length > 0 && this.isSend === true) {
            this.code = ''
            axios.post('http://shop.aixinjituan.com/Api/shop/get_code',{'mobile': this.mobile, 'img_code': this.img_code, 'ref_code': this.ref_code}).then((data) => {
            if (data.data.status === 30004) {
              MessageBox({title: '提示', message: data.data.msg})
            } else if (data.data.status === 10001) {
              MessageBox({title: '提示', message: data.data.msg})
            } else {
              if (data.data.status === 0) {
                Toast({ message: '短信验证码已发送',position: 'bottom', duration: 2000})
                this.isLogin = true
                this.isSend = false
                console.log(1)
                var num = 60
                num --
                this.$refs.get_code.innerHTML = `${num}秒后重发`
                this.$refs.get_code.style.background = '#999'
                this.timer = setInterval(() => {
                  num--
                  this.$refs.get_code.innerHTML = `${num}秒后重发`
                  if (num < 1) {
                    this.isSend = true
                    this.$refs.btn.style.opacity = '0.5'
                    this.isLogin = false
                    this.$refs.get_code.style.background = '#78D041'
                    this.$refs.get_code.innerHTML = this.getCodes
                    clearInterval(this.timer)
                  }
                }, 1000)
              } else {
                MessageBox({title: '提示',message: '图片验证码错误,请重新输入'
                }).then(() => {
                  this.img_code = ''
                  this.change_img()
                })
              }
            }
          })
        } else {
        }
      } else {
        MessageBox({
          title: '提示',
          message: '请输入正确的手机格式'
    })
      }
    }
  },
  // 清除定时器
  beforeDestroy () {
    clearInterval(this.timer)
  },
  watch: {
    // 监听手机输入框变化
    mobile (newM, oldM) {
      if (newM.length > 0) {
        this.isShow = true
        if (this.myreg.test(this.mobile) === true) {
         this.change_img ()
         this.code = ''
         this.imgShow = true
        }
      } else {
        this.isShow = false
      }
    }
  },
  updated () {
    if (this.myreg.test(this.mobile) === true && this.code.length > 3 && this.isSend === false) {
      this.$refs.btn.style.opacity = '1'
      this.isLogin = true
    } else {
      this.$refs.btn.style.opacity = '0.5'
      this.isLogin = false
    }
  },
  directives: {
    focus: {
      inserted: (el) => {
        el.onclick = function(){
        setTimeout(() => {
          el.scrollIntoView(false)
          el.scrollIntoViewIfNeeded()
        },600)
        }
        }
    }
  }
}
</script>
<style scoped lang='scss'>
.mint-popup,.mint-popup-right{
  width: 100%;
  height: 100%;
  overflow: auto
}
.agrees{
  width:100%;
  text-align: center;
  overflow: auto;
  color:#fff;
  margin-top:5px;
  div {
    display: inline-block;
    vertical-align: middle;
    #agree{width:10px;height:10px;display:inline-block;vertical-align: middle;}
  }
}
.login {
  width: 100%;
  height: 100%;
  background: url('~assets/img/login_bg.png') no-repeat;
  background-size: cover;
  overflow: auto;
  .logo {
    clear: both;
    margin-top: 30px;
    img {
      width: 103px ;
      height: 74px;
    }
    h2 {
      font-size: 30px;
      color: #fff;
      margin: 16px auto;
    }
  }
  .flex-box {
    width: 305px;
    margin: auto;
  }
}
</style>
